<template>
  <div>
    <MyHeader style="margin-bottom: 50px"></MyHeader>
    <RightShow></RightShow>
    <div style="margin-left: 50px;width: 1200px">
      <el-empty :image-size="200" style="margin-top: 200px" v-show="isHave"></el-empty>
      <el-card style="background:linear-gradient(135deg,#948e99,#2e1437);width: 1200px;">
        <div style="display: flex">
          <img :src="userInfolist.user_icon?userInfolist.user_icon:authorSrl" alt="" style="width: 400px;height: 300px">
          <div style="font-size: 22px;color: white;margin-left: 20px;line-height: 50px">
            <div>作者：{{ userInfolist.user_name }}</div>
            <div>简介：{{ userInfolist.about_us ? userInfolist.about_us : '暂无' }}</div>
          </div>
        </div>
      </el-card>
      <div>
        <div style="border-bottom: 1px solid rgba(0,0,0,0.2);margin-bottom: 10px;"><h1>ta的作品/文章</h1></div>
        <div style="display: flex;justify-content:flex-start;height: 200px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-bottom: 20px"
             v-for="article in articleList" :key="article.article_id">
          <img :src="article.article_img" alt="" style="width: 300px;flex-shrink:0">
          <!--        内容-->
          <div
              style="display: flex;flex-direction: column;justify-content: space-between;padding-left: 10px;padding-bottom: 20px;padding-right:20px;background: linear-gradient(135deg,#ece9e6,#ffffff);width: 100%">
            <div>
              <h3>{{ article.article_title }}</h3>
              <div>{{ article.article_content }}</div>
            </div>
            <div style="display: flex;justify-content: space-between">
              <div>{{ $moment(article.putout_time).format("YYYY-MM-DD hh:mm:ss") }}</div>
              <el-link type="primary" @click="moreArticle(article.article_id)">查看更多</el-link>
            </div>
          </div>
          <div>
          </div>
        </div>
        <el-empty description="暂无内容" v-show="!articleList.length"></el-empty>
      </div>
      
    </div>
  </div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import RightShow from "@/components/RightShow";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Author",
  components: {
    MyHeader,
    RightShow
  },
  data() {
    return {
      isHave: false,
      authorSrl: require('../../public/img/Myphoto.jpg'),
      userInfolist: '',
      articleList: ''
    }
  },
  methods:{
    moreArticle(index){
     this.$router.push({name:'newContent',query:{id:index}})
    }
  },
  watch: {
    '$route'(to, from) {
      this.$api.userApi.userInfo({id: this.$route.query.userId}).then(value => {
        this.userInfolist = value.result
        // if(this.userInfolist.username===this.$store.state.commitSum.user_name){
        //   this.$router.push({name:'myBlog'})
        // }
      })
      //根据id查询用户的文章
      this.$api.articleApi.userArticle({id: this.$route.query.userId}).then(value => {
        this.articleList = value
        console.log(value)
      })
    }
  },
  created() {
    //根据ID查询
    this.$api.userApi.userInfo({id: this.$route.query.userId}).then(value => {
      this.userInfolist = value.result
    })
    //根据id查询用户的文章
    this.$api.articleApi.userArticle({id: this.$route.query.userId}).then(value => {
      this.articleList = value
    })
  }
}
</script>

<style scoped>

</style>